
import { Component } from 'react';

// 通过继承 React.Component 来定义组件
class Panda extends Component {
    // 初始化组件的状态
    state = { visible: true }
    // 定义 render 函数
    render(){
        return ( 
            this.state.visible 
            ?
            <div>
                <p>你好</p>
                <button onClick={ () => this.toggle() }>隐藏</button>
            </div> 
            :
            <div>
                <button onClick={ () => this.toggle() }>显示</button>
            </div> 
        )
    }
    // 自定义函数
    toggle(){
        let v = this.state.visible ;
        this.setState( { visible: !v } );
    }
}

export default Panda ;